<template>
  <div class="app-container flex flex-col">
    <div class="flex flex-wrap gap-y-2">
      <div
        v-for="optionKey in groupKeys"
        :key="optionKey"
        class="mr-4 flex"
        style="width: 400px"
      >
        <el-select
          v-model="groupValues[optionKey]"
          multiple
          size="mini"
          class="mr-2"
          :placeholder="`${optionKey} groups`"
          style="width: 100%"
          filterable
          clearable
          collapse-tags
        >
          <el-option
            v-for="group in groupOptions[optionKey]"
            :key="group"
            :label="group"
            :value="group"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          size="mini"
          class="ml-2"
          @click="selectAll(optionKey)"
        >
          全选
        </el-button>
      </div>

      <div class="mr-2 flex">
        <el-button size="mini" @click="resetSelections">重置</el-button>
        <el-button size="small" style="height: 30px;" @click="copyLastGroups">
          copy last groups
        </el-button>
        <el-button size="mini" class="flex justify-center items-center" style="height: 30px;" @click="copyUrl">
          copy url
        </el-button>
      </div>
    </div>
    <div class="flex-1">
      <RangeLine
        :show-line-type="3"
        :group-map="flattenedGroupMap"
        :select-groups="selectGroups"
      ></RangeLine>
    </div>
  </div>
</template>

<script>

import _ from 'lodash'
import { getSeriesForLineTypeThree } from '@/utils/study.js'

import {
  TWO_GROUP_MAP,
  THREE_GROUP_MAP,
  FOUR_GROUP_MAP,
  FIVE_GROUP_MAP,
  SIX_GROUP_MAP,
  SEVEN_GROUP_MAP,
  EIGHT_GROUP_MAP,
  TEN_GROUP_MAP,
  TWELVE_GROUP_MAP,
  SIXTEEN_GROUP_MAP,
  TWENTYFOUR_GROUP_MAP
} from '@/utils/study.js'

export default {
  data() {
    const groupMap = {
      two: TWO_GROUP_MAP,
      three: THREE_GROUP_MAP,
      four: FOUR_GROUP_MAP,
      five: FIVE_GROUP_MAP,
      six: SIX_GROUP_MAP,
      seven: SEVEN_GROUP_MAP,
      eight: EIGHT_GROUP_MAP,
      ten: TEN_GROUP_MAP,
      twelve: TWELVE_GROUP_MAP,
      sixteen: SIXTEEN_GROUP_MAP,
      twentyfour: TWENTYFOUR_GROUP_MAP
    }

    return {
      groupMap,
      flattenedGroupMap: Object.assign({}, ...Object.values(groupMap)),
      groupValues: Object.keys(groupMap).reduce((acc, key) => {
        acc[key] = []
        return acc
      }, {})
    }
  },
  computed: {
    groupKeys() {
      return Object.keys(this.groupMap)
    },
    groupOptions() {
      return Object.keys(this.groupMap).reduce((acc, key) => {
        acc[key] = Object.keys(this.groupMap[key])
        return acc
      }, {})
    },
    selectGroups() {
      return _.flatten(Object.values(this.groupValues))
    }
  },
  methods: {
    // 复制最后一期号码所在组的号码
    copyLastGroups() {
      const selectGroupMap = _.pick(this.flattenedGroupMap, this.selectGroups)
      const allValues = getSeriesForLineTypeThree(this.allValues, selectGroupMap)
      const allGroupAccuracy = _.last(allValues).allGroupAccuracy
      const currentAllGroupsNumber = Array.from(new Set(allGroupAccuracy.map(e => e.groupsNumber).flat())).sort((a, b) => a - b)
      navigator.clipboard.writeText(`[
        ${currentAllGroupsNumber.join(',')}
      ]`)
    },
    selectAll(optionKey) {
      // 选择当前组的所有选项
      this.groupValues[optionKey] = [...this.groupOptions[optionKey]]
    },
    resetSelections() {
      Object.keys(this.groupValues).forEach((key) => {
        this.groupValues[key] = []
      })
    }
  }
}
</script>
